<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <!-- 左侧 -->
    <a-layout-sider :theme="layoutTheme" v-model="collapsed" :trigger="null" collapsible>
      <!-- logo -->
      <GlobalLogo :title="title" :theme="layoutTheme" />
      <!-- 菜单 -->
      <NavMenu :theme="layoutTheme" :collapsed="collapsed" />
    </a-layout-sider>
    <!-- 右侧 -->
    <a-layout>
      <!-- 头部 -->
      <a-layout-header style="background: #fff; padding: 0">
        <GloablHeader :collapsed.sync="collapsed" />
      </a-layout-header>
      <!-- 内容 -->
      <a-layout-content>
        <div class="layout__main">
          <TabsView />
        </div>
        <!-- 底部 -->
        <a-layout-footer>
          <GlobalFooter />
        </a-layout-footer>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import { mapState } from 'vuex'
import { SIDEBAR_TYPE } from '@/store/mutation-types'
import config from '@/config/defaultSettings'
import { NavMenu, GloablHeader, GlobalFooter, GlobalLogo, TabsView } from './components'
import RouteTransition from './RouteTransition'

export default {
  name: 'BasicLayout',
  components: {
    RouteTransition,
    NavMenu,
    GloablHeader,
    GlobalFooter,
    GlobalLogo,
    TabsView
  },
  data() {
    return {
      collapsed: false,
      layoutTheme: config.navTheme,
      title: config.title
    }
  },
  created() {
    // 处理侧栏收起状态
    this.$watch('collapsed', () => {
      this.$store.commit(`app/${SIDEBAR_TYPE}`, this.collapsed)
    })
  },
  mounted() {}
}
</script>

<style lang="less" scoped>
#components-layout-demo-custom-trigger {
  height: 100%;

  .ant-layout-sider {
    height: 100vh;
    width: 256px !important;
    max-width: 256px !important;
    min-width: 256px !important;
  }

  .ant-layout-sider-collapsed {
    width: 80px !important;
    max-width: 80px !important;
    min-width: 80px !important;
  }
}

.ant-layout-content {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 64px);
  overflow: auto;
}

.layout__main {
  flex: 1;
  overflow: hidden;
}
</style>
